<template>
  <ul>
    <!-- <li>ID: {{$route.params.mid}}</li> -->
    <li>ID: {{mid}}</li>
    <!-- <li>Title: {{detail.title}}</li> -->
    <!-- <li>Title: {{$route.query.title}}</li> -->
    <li>Title: {{title}}</li>
    <li>Content: {{detail.content}}</li>
  </ul>
</template>

<script>
const allMessageDetail = [
  {id: 1, title: 'message001', content: 'message content001'},
  {id: 2, title: 'message002', content: 'message content002'},
  {id: 3, title: 'message003', content: 'message content003'},
  {id: 4, title: 'message004', content: 'message content004'}
]

export default {
  props: ['mid', 'title'],
  data() {
    return {
      detail: {}
    }
  },
  mounted() {
    setTimeout(() => {
      const mid = this.$route.params.mid * 1
      const detail = allMessageDetail.find(detail => mid === detail.id)
      this.detail = detail
    }, 1000);
  },
  watch: {
    '$route' (to, from) {
      setTimeout(() => {
        // 得到当前新的id
        const mid = to.params.mid * 1
        const detail = allMessageDetail.find(detail => detail.id === mid)
        this.detail = detail
      }, 1000);
    }
  }
}
</script>

<style scoped>
</style>